<% layout("/inc/layout_page.html"){ %>

<form action="${BASE}/admin/cms/CmsColumns/save" id="form_save" method="post">
<input type="hidden" name="level" id="level" value="${pMenu.level+1}" />
<input type="hidden" name="parentId" id="parentId" value="${pMenu.id}" />
<div class="box">
  <div class="box-header">
    <h4 class="box-title"><i class="fa fa-bars"></i> 添加栏目表</h4>
    <div class="box-tools">
      <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-save"></i> 保存</button>
      <a href="javascript:;" onclick="layer_close()" class="btn btn-info btn-sm"><i class="fa fa-chevron-left"></i> 返回</a>
    </div>
  </div>
  <div class="box-body">
    <table class="table tform table-bordered">
      <tr>
        <th width="20%"><label for="parentName">上级栏目：</label></th>
        <td>
          <div class="col-xs-8">
          <div class="input-group">
            <input type="text" id="parentName" name="parentName" value="${pMenu.name!}" class="form-control" readonly="readonly" >
            <span class="input-group-btn" id="btn_span_parentIds"><button type="button" class="btn btn-info btn-flat"><i class="fa fa-th"></i> 选择上级栏目</button></span>
          </div>
          </div>
          <div class="col-xs-4">&nbsp;</div>
        </td>
      </tr>
      <tr>
        <th><label for="name"><i class="required">*</i>栏目名称：</label></th>
        <td>
          <div class="col-xs-8"><input id="name" name="name" type="text" class="form-control"></div>
          <div class="col-xs-4">&nbsp;</div>
        </td>
      </tr>
      <tr>
        <th><label for="showModes">展现方式：</label></th>
        <td>
          <div class="col-xs-8">
          <label class="control-label">&nbsp;<input type="radio" name="showModes" class="minimal" value="0" checked> 栏目&nbsp;&nbsp;</label>
          <label class="control-label">&nbsp;<input type="radio" name="showModes" class="minimal" value="1"> 单页&nbsp;&nbsp;</label>
          <label class="control-label">&nbsp;<input type="radio" name="showModes" class="minimal" value="2"> 链接&nbsp;&nbsp;</label>
          </div>
          <div class="col-xs-4">&nbsp;</div>
        </td>
      </tr>
      <tr id="div_radio_href">
        <th><label for="href">链接：</label></th>
        <td>
          <div class="col-xs-8"><input id="href" name="href" type="text" class="form-control"></div>
          <div class="col-xs-4">&nbsp;</div>
        </td>
      </tr>
      <tr id="div_radio_listtpl">
        <th><label for="customListView">自定义列表视图：</label></th>
        <td>
          <div class="col-xs-4"><input id="customListView" name="customListView" value="/tpl/column" type="text" class="form-control"></div>
          <div class="col-xs-4">
            <select class="form-control" id="select_tpl_list" onchange="changeTplList(this.value)">
				<option value="0">不选择</option>
            </select>
          </div>
          <div class="col-xs-4">&nbsp;</div>
        </td>
      </tr>
      <tr id="div_radio_contenttpl">
        <th><label for="customContentView">自定义内容视图：</label></th>
        <td>
          <div class="col-xs-4"><input id="customContentView" name="customContentView" value="/tpl/article" type="text" class="form-control"></div>
          <div class="col-xs-4">
            <select class="form-control" id="select_tpl_content" onchange="changeTplContent(this.value)">
				<option value="0">不选择</option>
            </select>
          </div>
          <div class="col-xs-4">&nbsp;</div>
        </td>
      </tr>
      <tr id="div_radio_viewConfig">
        <th><label for="viewConfig">单面内容：</label></th>
        <td>
          <div class="col-xs-9">
            <script id="viewConfig" name="viewConfig" type="text/plain"></script>
              <script type="text/javascript" src="/lib/ueditor/ueditor.config.js"></script>
              <script type="text/javascript" src="/lib/ueditor/ueditor.all.min.js"></script>
              <script type="text/javascript">UE.getEditor('viewConfig');</script>
          </div>
          <div class="col-xs-3">&nbsp;</div>
        </td>
      </tr>
      <tr>
        <th><label for="inMenu">是否在导航中显示：</label></th>
        <td>
          <div class="col-xs-8">
          <label class="control-label">&nbsp;<input type="radio" name="inMenu" class="minimal" value="1" checked> 是&nbsp;&nbsp;</label>
          <label class="control-label">&nbsp;<input type="radio" name="inMenu" class="minimal" value="0"> 否&nbsp;&nbsp;</label>
          </div>
          <div class="col-xs-4">&nbsp;</div>
        </td>
      </tr>
      <tr>
        <th><label for="showChild">是否显示子导航菜单：</label></th>
        <td>
          <div class="col-xs-8">
          <label class="control-label">&nbsp;<input type="radio" name="showChild" class="minimal" value="1"> 是&nbsp;&nbsp;</label>
          <label class="control-label">&nbsp;<input type="radio" name="showChild" class="minimal" value="0" checked> 否&nbsp;&nbsp;</label>
          </div>
          <div class="col-xs-4">&nbsp;</div>
        </td>
      </tr>
      <tr>
        <th><label for="allowComment">是否允许评论：</label></th>
        <td>
          <div class="col-xs-8">
          <label class="control-label">&nbsp;<input type="radio" name="allowComment" class="minimal" value="1" checked> 是&nbsp;&nbsp;</label>
          <label class="control-label">&nbsp;<input type="radio" name="allowComment" class="minimal" value="0"> 否&nbsp;&nbsp;</label>
          </div>
          <div class="col-xs-4">&nbsp;</div>
        </td>
      </tr>
      <tr>
        <th><label for="isAudit">是否需要审核：</label></th>
        <td>
          <div class="col-xs-8">
          <label class="control-label">&nbsp;<input type="radio" name="isAudit" class="minimal" value="1"> 是&nbsp;&nbsp;</label>
          <label class="control-label">&nbsp;<input type="radio" name="isAudit" class="minimal" value="0" checked> 否&nbsp;&nbsp;</label>
          </div>
          <div class="col-xs-4">&nbsp;</div>
        </td>
      </tr>

      <tr>
        <th><label for="remarks">栏目简介：</label></th>
        <td>
          <div class="col-xs-8">
        	<textarea id="remarks" name="remarks" cols="" rows="" class="form-control"  placeholder="备注信息...255个字符以内" dragonfly="true" onKeyUp="textarealength(this,255)"></textarea>
            <p class="textarea-numberbar"><em class="textarea-length">0</em>/255</p>
          </div>
          <div class="col-xs-4">&nbsp;</div>
        </td>
      </tr>
    </table>
  </div>
  <div class="box-footer">
    <div class="box-tools pull-right">
      <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-save"></i> 保存</button>
      <a href="javascript:;" onclick="layer_close()" class="btn btn-info btn-sm"><i class="fa fa-chevron-left"></i> 返回</a>
    </div>
  </div>
</div>
</form>

  <div id="div_menu_select_tree" class="content" style="display: none;">
    <div class="box box-solid">
      <div class="box-body">
        <ul id="ul_menu_select_tree" class="ztree"></ul>
      </div>
    </div>
  </div>
  
<script type="text/javascript">
var isFirstSelectList = true;
function changeTplList(v) {
	if(0==v){
		if(!isFirstSelectList)
			$("#customListView").val("");
	}else{
		$("#customListView").val("/tpl/"+v);
		isFirstSelectList = false;
	}
}
var isFirstSelectContent = true;
function changeTplContent(v) {
	if(0==v){
		if(!isFirstSelectContent)
			$("#customContentView").val("");
	}else{
		$("#customContentView").val("/tpl/"+v);
		isFirstSelectContent = false;
	}
}

function check_radio_showModes(cval){
	if(1==cval){
		$("#div_radio_href").hide();
		$("#div_radio_listtpl").hide();
		$("#div_radio_contenttpl").show();
		$("#div_radio_viewConfig").show();
		$("#customContentView").val("/tpl/singlepage");
	}else if(2==cval){
		$("#div_radio_href").show();
		$("#div_radio_listtpl").hide();
		$("#div_radio_contenttpl").hide();
		$("#div_radio_viewConfig").hide();
	}else{
		$("#div_radio_href").hide();
		$("#div_radio_listtpl").show();
		$("#div_radio_contenttpl").show();
		$("#div_radio_viewConfig").hide();
		$("#customListView").val("/tpl/column");
		$("#customContentView").val("/tpl/article");
	}
}

var menuTree;
var tree_setting = {};

function showDailog(){
	if(!menuTree){
		$("#ul_menu_select_tree").html("<li>没有栏目数据</li>");
	}
	layer.open({
		type: 1,
		shadeClose:true,
		title :'选择上级栏目',
		area: ['80%', '90%'],
		content: $('#div_menu_select_tree'),
		btn: ['确认选择', '取消', '设置为顶级栏目'],
		btn1: function(index, layero){
			if(menuTree){
				var nodes = menuTree.getSelectedNodes()[0];
				if(nodes){
					$("#form_save #parentId").val(nodes.id);
					$("#form_save #level").val(parseInt(nodes.level)+1);
					$("#form_save #parentName").val(nodes.name);
				}
			};
			layer.close(index);
		},
		btn2: function(index, layero){}, 
		btn3: function(index){
			$("#form_save #parentId").val(0);
			$("#form_save #level").val(0);
			$("#form_save #parentName").val('顶级栏目');
		}
	});
}
function select_parent_menu(){
	if(menuTree){
		showDailog();
	}else{
		$.getJSON("${BASE}/admin/cms/CmsColumns/treeData",{}, function(str){
			$("#ul_menu_select_tree").text("");
			if(str)
				menuTree = $.fn.zTree.init($("#ul_menu_select_tree"), tree_setting, str);
			else
				menuTree = null;
			showDailog();
		});
	}
}
$(function(){

	$.getJSON("${BASE}/admin/cms/CmsColumns/tplList",{}, function(str){
		for(var i in str){
			var html = '<option value="'+str[i].value+'">'+str[i].name+'</option>'
			$("#select_tpl_list").append(html);
			$("#select_tpl_content").append(html);
		}
	});

    $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
      checkboxClass: 'icheckbox_minimal-blue',
      radioClass: 'iradio_minimal-blue'
    });
    check_radio_showModes(0);
	
	$("#form_save #parentName, #form_save #btn_span_parentIds").click(select_parent_menu);

	$("#form_save input[name='showModes']").on('ifChanged', function(event){
		var cval = $(this).val();
		check_radio_showModes(cval);
	});
	
	$("#form_save").validate({
		errorPlacement: function(error, element) {
			error.appendTo(element.parent().next());
		},
		submitHandler : function(form) {
			layer.load(1, {shade: [0.3,'#fff']});
			$(form).ajaxSubmit({
				dataType:"json",
				success:function( jsondata ){
					layer.closeAll('loading');
					if(jsondata.success){
						parent.toastr.success('保存成功！');
						parent.loadTree();
						layer_close();
					}else{
						parent.toastr.error(jsondata.msg);
					}
				}
			});
		},
		rules : {
			name : {
				required : true
			}
		}, 
		messages : { 
			name : { 
				required : "名称不能为空"
			}
		}
	});
});
</script>

<% } %>